<template>
  <div class="common-layout">
    <HeadContent title="审批休假"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="20">
          <el-card style="width: 1400px; height: 632px" shadow="hover">
            <div class="el-card-tab">
              <div class="t-tab">
                <span @click="notClockFn('未补签', 0)" :class="{ actice: activeBoxIndex === 0}">未补签</span>
                <span @click="notClockFn('待审核', 1)" :class="{ actice: activeBoxIndex === 1}">待审核</span>
                <span @click="notClockFn('已审核', 2)" :class="{ actice: activeBoxIndex === 2}">已审核</span>
              </div>
              <div>
                 <el-table :data="tableData" :border="true" stripe style="width: 100%; height: 527px;">
                  <el-table-column prop="username" label="姓名" width="190" style="height: 50px !important;" align="center" />
                  <el-table-column prop="date" label="日期" width="190" align="center" />
                  <el-table-column prop="checkInTime" label="上班时间" width="190" align="center" />
                  <el-table-column prop="checkOutTime" label="下班时间" width="190" align="center"  />
                  <el-table-column prop="reason" label="异常原因" width="190" align="center" />
                  <el-table-column prop="status" label="状态" width="190" align="center" />
                  <el-table-column fixed="right" label="操作"  align="center" v-if="activeBoxIndex === 0">
                    <template style="display: flex" #default="scope">
                      <el-button type="warning" @click="aFn(scope)">
                        <el-icon> <Refresh /> </el-icon>&nbsp;修改
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="auditorName" label="审核人" flex align="center" v-if="activeBoxIndex === 1 || activeBoxIndex === 2" />
                </el-table>
              </div>
            </div>
          </el-card>

          <!-- 分页 -->

          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="clockPage.pageNum"
              v-model:page-size="clockPage.pageSize"
              :disabled="false"
              layout="prev, pager, next, jumper, total"
              :total="allTotal"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-space>

        <el-dialog v-model="dialogFormVisible" title="修改补签信息" width="500">
          <el-form :model="updateform">
            <el-form-item label="上班时间：" :label-width="formLabelWidth">
              <el-time-select
                v-model="updateform.checkInTime"
                style="width: 240px"
                start="08:00"
                step="00:05"
                end="09:00"
                placeholder="选择上班时间"
              />
            </el-form-item>
            <el-form-item label="下班时间：" :label-width="formLabelWidth">
              <el-time-select
                v-model="updateform.checkOutTime"
                style="width: 240px"
                start="17:00"
                step="00:10"
                end="23:59"
                placeholder="选择下班时间"
              />
            </el-form-item>
            <el-form-item label="异常原因：" :label-width="formLabelWidth">
              <el-select v-model="updateform.reason" placeholder="选择异常原因" style="width: 240px">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="onBack()">返回</el-button>
              <el-button type="primary" @click="submitFn"> 提交 </el-button>
            </div>
          </template>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import TagComtent from '@/components/TagComtent.vue'
import { ElTable } from 'element-plus'
import HeadContent from '@/components/HeadContent.vue'
import { buQian, notClock } from '@/api/clock'
import { type UpdateClock, type NotClock, type ClockPage } from '@/model'

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  clockPage.value.pageNum = val
  notClockFn(aaa.value, activeBoxIndex.value)
}

const tableData = ref<NotClock[]>([])
const clockPage = ref<ClockPage>({
  status: '',
  pageNum: 1,
  pageSize: 10
})
const aaa = ref('')
const allTotal = ref(0)
const activeBoxIndex = ref(0)
const notClockFn = async (str: string, index: number) => {
  aaa.value = str
  activeBoxIndex.value = index
  clockPage.value.status = str
  const res = await notClock(clockPage.value)
  console.log(res.data);
  tableData.value = res.data.records
  allTotal.value = res.data.total
}

notClockFn('未补签', 0)
// 弹出框
const options = ['忘记签到', '设备故障', '网络错误', '其他']
const updateform = ref<UpdateClock>({
  id: 0,
  checkInTime: '',
  checkOutTime: '',
  reason: '',
  status: '待审核',

})
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const aFn = (scope:any) => {
  dialogFormVisible.value = true
  updateform.value.id = scope.row.id
}

const buQianFn = async () => {
  const res = await buQian(updateform.value)
  console.log(res.data);
  notClockFn('未补签', 0)
  reset()
}
const submitFn = () => {
  dialogFormVisible.value = false
  buQianFn()
}

const onBack =() => {
  dialogFormVisible.value = false
  reset()
}

const reset = () => {
  updateform.value = {
    id: 0,
    checkInTime: '',
    checkOutTime: '',
    reason: '',
    status: '待审核'
  }
}
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
}



.el-card-tab {
  width: 100%;
  height: 600px;
  /* background-color: pink; */
  .t-tab {
    height: 45px;
    margin-bottom: 20px;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    span {
      color: #909399;
      
      cursor: pointer;
      padding: 5px 10px;
      margin: 0 10px;
      border: 1px solid #d2d2d2;
      border-radius: 10px;
    }
    /* span:nth-child(1) {
      border: 1px solid #909399;
    }
    span:nth-child(2) {
      border: 1px solid #909399;
    } */
    span:hover {
      
    }

    .actice {
      color: #fff;
      background-color: #409eff;
    }

  }
}
</style>
